<div class="modal-header primary">
    <h5 class="modal-title" id="modal-title">
        Create Upstream
        <a  class="modal-close pull-right" ng-click="close()">
            <i class="mdi mdi-close"></i>
        </a>

    </h5>
</div>

<div class="modal-body" id="modal-body">
    <div class="alert alert-danger" data-ng-show="errors.message">
        {{errors.message}}
    </div>
    <form class="form-horizontal">
        <div class="form-group" ng-class="{'has-error' : errors.name}">
            <label class="col-sm-3 control-label">Name
                <br><em><small class="help-block">required</small></em></label>
            <div class="col-sm-8">
                <input ng-model="upstream.name" class="form-control">
                <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
                <p class="help-block">
                    This is a hostname like name that can be referenced in an <code>upstream_url</code> field of an <code>api</code>
                    or the <code>host</code> of a service.
                </p>

            </div>
        </div>
        <div class="form-group" ng-class="{'has-error' : errors.slots}">
            <label class="col-sm-3 control-label">Slots
                <br><em><small class="help-block">optional</small></em></label>
            <div class="col-sm-8">
                <input type="number" ng-model="upstream.slots" class="form-control">
                <div class="text-danger" ng-if="errors.slots" data-ng-bind="errors.slots"></div>
                <p class="help-block">
                    The number of slots in the loadbalancer algorithm (<code>10-65536</code>, defaults to <code>1000</code>).
                </p>

            </div>
        </div>
        <div class="form-group" ng-if="compareKongVersion('0.12.0') < 0" ng-class="{'has-error' : errors.orderlist}">
            <label class="col-sm-3 control-label">Orderlist
                <br><em><small class="help-block">optional</small></em></label>
            <div class="col-sm-8">
                <chips ng-model="upstream.orderlist">
                    <chip-tmpl>
                        <div class="default-chip">
                            {{chip}}
                            <i class="mdi mdi-close" remove-chip></i>
                        </div>
                    </chip-tmpl>
                    <input chip-control/>
                </chips>
                <div class="text-danger" ng-if="errors.orderlist" data-ng-bind="errors.orderlist"></div>
                <p class="help-block">
                    A list of sequential, but randomly ordered, integer numbers that determine the distribution of the slots in the balancer. If omitted it will be generated. If given, it must have exactly <code>slots</code> number of entries.
                </p>

            </div>
        </div>
        <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors.hash_on}">
            <label class="col-sm-3 control-label">Hash on
                <br><em>
                    <small class="help-block">optional</small>
                </em></label>
            <div class="col-sm-8">
                <select ng-model="upstream.hash_on" class="form-control">
                    <option value="none">none</option>
                    <option value="consumer">consumer</option>
                    <option value="ip">ip</option>
                    <option value="header">header</option>
                </select>
                <div class="text-danger" ng-if="errors.hash_on" data-ng-bind="errors.hash_on"></div>
                <p class="help-block">
                    What to use as hashing input: <code>none</code>, <code>consumer</code>, <code>ip</code>, or <code>header</code> (defaults to <code>none</code> resulting in a weighted-round-robin scheme).
                </p>
            </div>
        </div>
        <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors.hash_fallback}">
            <label class="col-sm-3 control-label">Hash fallback
                <br><em>
                    <small class="help-block">optional</small>
                </em></label>
            <div class="col-sm-8">
                <select ng-model="upstream.hash_fallback" class="form-control">
                    <option value="none">none</option>
                    <option value="consumer">consumer</option>
                    <option value="ip">ip</option>
                    <option value="header">header</option>
                </select>
                <div class="text-danger" ng-if="errors.hash_fallback" data-ng-bind="errors.hash_fallback"></div>
                <p class="help-block">
                    What to use as hashing input if the primary <code>hash_on</code> does not return a hash (eg. header is missing, or no consumer identified)
                </p>
            </div>
        </div>

        <!-- ACTIVE HEALTH CHECKS -->
        <div class="col col-12 margin-bottom padding clickable" style="background-color: #eaeaea" ng-click="showActiveHealthChecks = !showActiveHealthChecks">
            <h5 class="no-margin no-padding">
                Active health checks
                <i class="mdi pull-right" ng-class="{'mdi-chevron-down': !showActiveHealthChecks,'mdi-chevron-up': showActiveHealthChecks,}"></i>
            </h5>
        </div>
        <div ng-show="showActiveHealthChecks">
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.timeout']}">
                <label class="col-sm-3 control-label">Active healthchecks timeout
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.timeout" class="form-control">
                    <div class="text-danger" ng-if="errors.healthchecks.active.timeout" data-ng-bind="errors.healthchecks.active.timeout"></div>
                    <p class="help-block">
                        The connection timeout limit for the HTTP GET request of the probe. The default value is 1 second.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.concurrency']}">
                <label class="col-sm-3 control-label">Active healthchecks concurrency
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.concurrency" class="form-control">
                    <div class="text-danger" ng-if="errors.healthchecks.active.concurrency" data-ng-bind="errors.healthchecks.active.concurrency"></div>
                    <p class="help-block">
                        Number of targets to check concurrently in active health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.http_path']}">
                <label class="col-sm-3 control-label">Active healthchecks HTTP path
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input ng-model="upstream.healthchecks.active.http_path" class="form-control">
                    <div class="text-danger" ng-if="errors.healthchecks.active.http_path" data-ng-bind="errors.healthchecks.active.http_path"></div>
                    <p class="help-block">
                        The path that should be used when issuing the HTTP GET request to the target. The default value is <code>/</code>.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.healthy.interval']}">
                <label class="col-sm-3 control-label">Active healthchecks healthy interval
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.healthy.interval" class="form-control">
                    <div class="text-danger" ng-if="errors.healthchecks.active.healthy.interval" data-ng-bind="errors.healthchecks.active.healthy.interval"></div>
                    <p class="help-block">
                        Interval between active health checks for healthy targets (in seconds). A value of zero indicates that active probes for
                        healthy targets should not be performed.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.healthy.http_statuses']}">
                <label class="col-sm-3 control-label">Active healthchecks healthy http statuses
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <chips ng-model="upstream.healthchecks.active.healthy.http_statuses">
                        <chip-tmpl>
                            <div class="default-chip">
                                {{chip}}
                                <i class="mdi mdi-close" remove-chip></i>
                            </div>
                        </chip-tmpl>
                        <input chip-control/>
                    </chips>
                    <div class="text-danger" ng-if="errors['healthchecks.active.healthy.http_statuses']" data-ng-bind="errors['healthchecks.active.healthy.http_statuses']"></div>
                    <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                    <p class="help-block">
                        An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.healthy.successes']}">
                <label class="col-sm-3 control-label">Active healthchecks healthy successes
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.healthy.successes" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.active.healthy.successes']" data-ng-bind="errors['healthchecks.active.healthy.successes']"></div>
                    <p class="help-block">
                        Number of successes in active probes (as defined by <code>healthchecks.active.healthy.http_statuses</code>) to consider a target healthy.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.interval']}">
                <label class="col-sm-3 control-label">Active healthchecks unhealthy interval
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.unhealthy.interval" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.interval']" data-ng-bind="errors['healthchecks.active.unhealthy.interval']"></div>
                    <p class="help-block">
                        Interval between active health checks for healthy targets (in seconds). A value of zero indicates that active probes for
                        healthy targets should not be performed.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.http_statuses']}">
                <label class="col-sm-3 control-label">Active healthchecks unhealthy http statuses
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <chips ng-model="upstream.healthchecks.active.unhealthy.http_statuses">
                        <chip-tmpl>
                            <div class="default-chip">
                                {{chip}}
                                <i class="mdi mdi-close" remove-chip></i>
                            </div>
                        </chip-tmpl>
                        <input chip-control/>
                    </chips>
                    <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.http_statuses']" data-ng-bind="errors['healthchecks.active.unhealthy.http_statuses']"></div>
                    <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                    <p class="help-block">
                        An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.tcp_failures']}">
                <label class="col-sm-3 control-label">Active healthchecks unhealthy TCP failures
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.unhealthy.tcp_failures" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.tcp_failures']" data-ng-bind="errors['healthchecks.active.unhealthy.tcp_failures']"></div>
                    <p class="help-block">
                        Number of TCP failures in active probes to consider a target unhealthy.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.timeouts']}">
                <label class="col-sm-3 control-label">Active healthchecks unhealthy timeouts
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.unhealthy.timeouts" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.timeouts']" data-ng-bind="errors['healthchecks.active.unhealthy.timeouts']"></div>
                    <p class="help-block">
                        Number of timeouts in active probes to consider a target unhealthy.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.http_failures']}">
                <label class="col-sm-3 control-label">Active healthchecks unhealthy HTTP failures
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.active.unhealthy.http_failures" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.http_failures']" data-ng-bind="errors['healthchecks.active.unhealthy.http_failures']"></div>
                    <p class="help-block">
                        Number of HTTP failures in active probes (as defined by <code>healthchecks.active.unhealthy.http_statuses</code>) to consider a target
                        unhealthy.
                    </p>

                </div>
            </div>
        </div>
        <!-- END ACTIVE HEALTHCHECKS -->


        <!-- PASSIVE HEALTH CHECKS -->
        <div class="col col-12 margin-bottom padding clickable" style="background-color: #eaeaea" ng-click="showPassiveHealthChecks = !showPassiveHealthChecks">
            <h5 class="no-margin no-padding">
                Passive health checks
                <i class="mdi pull-right" ng-class="{'mdi-chevron-down': !showPassiveHealthChecks,'mdi-chevron-up': showPassiveHealthChecks,}"></i>
            </h5>
        </div>
        <div ng-show="showPassiveHealthChecks">
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.healthy.http_statuses']}">
                <label class="col-sm-3 control-label">Passive healthchecks healthy http statuses
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <chips ng-model="upstream.healthchecks.passive.healthy.http_statuses">
                        <chip-tmpl>
                            <div class="default-chip">
                                {{chip}}
                                <i class="mdi mdi-close" remove-chip></i>
                            </div>
                        </chip-tmpl>
                        <input chip-control/>
                    </chips>
                    <div class="text-danger" ng-if="errors['healthchecks.passive.healthy.http_statuses']" data-ng-bind="errors['healthchecks.passive.healthy.http_statuses']"></div>
                    <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                    <p class="help-block">
                        An array of HTTP statuses which represent healthiness when produced by proxied traffic, as observed by passive health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.healthy.successes']}">
                <label class="col-sm-3 control-label">Passive healthchecks healthy successes
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.passive.healthy.successes" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.passive.healthy.successes']" data-ng-bind="errors['healthchecks.passive.healthy.successes']"></div>
                    <p class="help-block">
                        Number of successes in passive probes (as defined by <code>healthchecks.passive.healthy.http_statuses</code>) to consider a target healthy.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.tcp_failures']}">
                <label class="col-sm-3 control-label">Passive healthchecks unhealthy TCP failures
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.passive.unhealthy.tcp_failures" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.tcp_failures']" data-ng-bind="errors['healthchecks.passive.unhealthy.tcp_failures']"></div>
                    <p class="help-block">
                        Number of TCP failures in passive probes to consider a target unhealthy.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.http_statuses']}">
                <label class="col-sm-3 control-label">Passive healthchecks unhealthy http statuses
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <chips ng-model="upstream.healthchecks.passive.unhealthy.http_statuses">
                        <chip-tmpl>
                            <div class="default-chip">
                                {{chip}}
                                <i class="mdi mdi-close" remove-chip></i>
                            </div>
                        </chip-tmpl>
                        <input chip-control/>
                    </chips>
                    <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.http_statuses']" data-ng-bind="errors['healthchecks.passive.unhealthy.http_statuses']"></div>
                    <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                    <p class="help-block">
                        An array of HTTP statuses which represent unhealthiness when produced by proxied traffic, as observed by passive health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.tcp_failures']}">
                <label class="col-sm-3 control-label">Passive healthchecks unhealthy TCP failures
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.passive.unhealthy.tcp_failures" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.tcp_failures']" data-ng-bind="errors['healthchecks.passive.unhealthy.tcp_failures']"></div>
                    <p class="help-block">
                        Number of TCP failures in proxied traffic to consider a target unhealthy, as observed by passive health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.timeouts']}">
                <label class="col-sm-3 control-label">Passive healthchecks unhealthy timeouts
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.healthchecks.passive.unhealthy.timeouts" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.timeouts']" data-ng-bind="errors['healthchecks.passive.unhealthy.timeouts']"></div>
                    <p class="help-block">
                        Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.http_failures']}">
                <label class="col-sm-3 control-label">Passive healthchecks unhealthy HTTP failures
                    <br>
                    <em>
                        <small class="help-block">optional</small>
                    </em>
                </label>
                <div class="col-sm-8">
                    <input ng-model="upstream.healthchecks.passive.unhealthy.http_failures" class="form-control">
                    <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.http_failures']" data-ng-bind="errors['healthchecks.passive.unhealthy.http_failures']"></div>
                    <p class="help-block">
                        Number of HTTP failures in passive probes (as defined by <code>healthchecks.passive.unhealthy.http_statuses</code>)
                        to consider a target unhealthy, as observed by passive health checks.
                    </p>

                </div>
            </div>
        </div>
        <!-- END PASSIVE HEALTHCHECKS -->


        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
                <button type="submit" class="btn btn-primary btn-block" ng-click="submit()">
                    <i class="mdi mdi-check"></i>
                    Submit Upstream
                </button>
            </div>
        </div>

    </form>
</div>